<template>
	<view style="background-color: #ffffff;">
		<view class="main-color" style="width: 100%;height: 600rpx;position: relative;">
			<view
				style="width: 680rpx;height: 520rpx;background-color: white;position: absolute;top: 30rpx;left: 35rpx;border-radius: 5rpx;padding: 20rpx;">
				<view style="overflow: hidden;">
					<!-- <view style="display: inline-block;vertical-align: middle;margin-top: 12rpx;margin-right: 6rpx;">
						<image style="width: 50rpx;height: 50rpx;" src="/static/store.png"></image>
					</view> -->
					<view
						style="display: inline-block;vertical-align: middle;font-size: 40rpx;font-weight: 800;margin-left: 5rpx;">
						{{store.name}}
					</view>
				</view>
				<view style="display: flex;">
					<view style="overflow: hidden;flex: 1;">
						<view
							style="display: inline-block;vertical-align: middle;margin-top: 10rpx;margin-right: 6rpx;">
							<image style="width: 30rpx;height: 30rpx;" src="/static/time.png"></image>
						</view>
						<view style="display: inline-block;vertical-align: middle;font-size: 24rpx;color: #666;">
							营业时间: {{store.onlineTime}}
						</view>
					</view>
					<view style="overflow: hidden;flex: 1;">
						<view
							style="display: inline-block;vertical-align: middle;margin-top: 10rpx;margin-right: 6rpx;">
							<image style="width: 30rpx;height: 30rpx;" src="/static/mobile.png"></image>
						</view>
						<view @click="call(store.servicePhone)"
							style="display: inline-block;vertical-align: middle;font-size: 24rpx;color: #666;">
							联系电话: {{store.servicePhone}}
						</view>
					</view>
				</view>
				<view style="overflow:hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		  text-overflow:ellipsis;overflow: hidden;">
					<view style="display: inline-block;vertical-align: middle;margin-top: 10rpx;margin-right: 6rpx;">
						<image style="width: 30rpx;height: 30rpx;" src="/static/address.png"></image>
					</view>
					<text @click="toAddress(store.addressLat,store.name,store.longitude,store.latitude)"
						style="vertical-align: middle;font-size: 24rpx;color: #666;">{{store.addressLat}}</text>
				</view>
				<view style="margin-top: 10rpx;">
					<view class="carousel-section">
						<swiper style="width: 100%;height: 300rpx;overflow-x: hidden;" circular @change="swiperChange" autoplay="true"
							interval="3000">
							<swiper-item v-for="(item, index) in banners" :key="index" class="carousel-item">
								<image :src="item.picUrl" style="width: 640rpx;height: 300rpx;" />
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 70rpx;" v-if="store.notice!=''">
			<uni-notice-bar backgroundColor="#ececec" color="#666" speed="50" :scrollable="true" :single="true"
				:text="store.notice" />
		</view>
		<view v-if="store.notice==''" class="cut"></view>
		<view class="function">
			<view v-for="(item, index) in functions" :key="index"
				style="display: flex;flex-direction: column;height: 145rpx;flex: 1;" @click="goto(item)">
				<view style="flex: 1;height: 84rpx;">
					<image :src="item.icon" style="width: 84rpx;height: 84rpx;margin-left: 17rpx;"></image>
				</view>
				<view style="flex: 1;margin-top: 5rpx;" class="functionDesc"><text>{{item.name}}</text></view>
			</view>
		</view>
		<view class="cut"></view>
		<view class="third">
			<view class="rechargeAndHexiao">
				<image src="/static/index/meituan-hexiao.jpg" @click="meituanHexiao"></image>
				<!-- <image src="/static/index/meituan_hexiao.png" @click="meituanHexiao"></image> -->
			</view>
			<view class="rechargeAndHexiao">
				<image src="/static/index/douyin-hexiao.jpg" @click="douyinHexiao"></image>
				<!-- <image src="/static/index/douyin_hexiao.png" @click="douyinHexiao"></image> -->
			</view>
			</view>
		<view class="cut"></view>
		<!-- <view class="joinus">
			<swiper class="carousel" circular @change="swiperChange" autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in images" :key="index" class="carousel-item"
					@click="toZhaoshang()">
					<image :src="item.picUrl" />
				</swiper-item>
			</swiper>
		</view> -->
		<!-- <view class="cut"></view> -->
		<view style="">
			<view v-for="(item, ind) in devices" :key="ind" v-if="item.isMealdevice==0">
				<view class="typeList"
					style="background-color: white;height: 310rpx;display: flex;flex-direction: column;padding: 30rpx;"
					@click="getDeviceMeal(item.id,item.machineName,item.deviceDesc,item.imageUrl,store.addressLat,item.room.status)">
					<view style="display: flex;flex:3">
						<view class="typeImg" style="margin-left: 20rpx;flex: 1;width: 100rpx;position: relative;">
							<image :src="item.imageUrl" mode="" @click.stop="fangda(item.imageUrl)"></image>
							<view v-if='item.room.status==1'
								style="width: 170rpx;height: 30rpx;line-height: 30rpx;background-color: #d23465;position: absolute;bottom: 2rpx;border-bottom-left-radius: 12rpx;border-bottom-right-radius: 12rpx;opacity:0.9;text-align: center;">
								<text style="font-size: 24rpx;color: #ffffff;">{{item.endTime}}结束</text>
							</view>
						</view>
						<view class="typeDetail" style="flex: 2;padding-left: 15rpx;">
							<view
								style="height: 40rpx;font-size: 30rpx;font-weight: 500;line-height: 50rpx;">
								{{item.machineName}}
							</view>
							<view style="display: flex;width: 280rpx;margin-top: 10rpx;">
								<view v-if='item.room.status==1'
									style="flex: 2;background-color: #d23465;font-size: 22rpx;font-weight: 400;line-height: 40rpx;color: #ffffff;border-radius: 10rpx;height: 40rpx;letter-spacing: 2rpx;">
									<text style="padding-left: 18rpx;">{{item.room.status | formatStatus}}</text>
								</view>
								<view v-if='item.room.status==2'
									style="flex: 2;background-color: #ffaa00;font-size: 22rpx;font-weight: 400;line-height: 40rpx;color: #ffffff;border-radius: 10rpx;height: 40rpx;letter-spacing: 2rpx;">
									<text style="padding-left: 18rpx;">{{item.room.status | formatStatus}}</text>
								</view>
								<view v-if='item.room.status==0'
									style="flex: 2;background-color: #0da944;font-size: 22rpx;font-weight: 400;line-height: 40rpx;color: #ffffff;border-radius: 10rpx;height: 40rpx;letter-spacing: 2rpx;">
									<text style="padding-left: 18rpx;">{{item.room.status | formatStatus}}</text>
								</view>
								<view v-if='item.room.status==3||item.room.status==4'
									style="flex: 2;background-color: #676767;font-size: 22rpx;font-weight: 400;line-height: 40rpx;color: #ffffff;border-radius: 10rpx;height: 40rpx;letter-spacing: 2rpx;">
									<text style="padding-left: 18rpx;">{{item.room.status | formatStatus}}</text>
								</view>
								<view class="typeTitle"
									style="text-align: center;flex: 3;margin-left: 20rpx;background-color: #ffffff;font-size: 22rpx;font-weight: 400;line-height: 40rpx;border-radius: 10rpx;height: 40rpx;border-style: solid;border-width: 1rpx;">
									<text>{{item.customerMeal}}</text>
								</view>
							</view>
							<view class="typeTitle1" style="height: 30rpx;margin-top: 5rpx;line-height:30rpx;">
								<text style="">{{item.deviceDesc}}</text>
							</view>
						</view>
						<view class="typeCost" style="flex: 1;">
							<text class="">立即开台</text>
						</view>
					</view>
					<view style="flex: 1;">
						<view style="display: flex;padding: 20rpx;">
							<view v-for="(item1,index) in item.timeAxes" :key="index" :style="item1.style">
								<text style="font-size: 10rpx">{{item1.hour}}</text>
							</view>
						</view>
					</view>
					<view style="flex: 1;">
						<view style="display: flex;padding: 20rpx;">
							<view
								style="background:#6b6b6b;height:36rpx;width: 17rpx;margin-right: 10rpx;height: 17rpx;padding-left: 5rpx;border-radius: 5rpx;">
							</view>
							<view style="font-size: 15rpx;height: 18rpx;line-height: 18rpx;"><text>不可用</text></view>
							<view
								style="background:#d23465;height:36rpx;width: 17rpx;margin-right: 10rpx;height: 17rpx;padding-left: 5rpx;border-radius: 5rpx;margin-left: 10rpx;">
							</view>
							<view style="font-size: 15rpx;height: 18rpx;line-height: 18rpx;"><text>使用中</text></view>
							<view
								style="background:#fda900;height:36rpx;width: 17rpx;margin-right: 10rpx;height: 17rpx;padding-left: 5rpx;border-radius: 5rpx;margin-left: 10rpx;">
							</view>
							<view style="font-size: 15rpx;height: 18rpx;line-height: 18rpx;"><text>已预约</text></view>
							<view
								style="background:#E8E8E8;height:36rpx;width: 17rpx;margin-right: 10rpx;height: 17rpx;padding-left: 5rpx;border-radius: 5rpx;margin-left: 10rpx;">
							</view>
							<view style="font-size: 15rpx;height: 18rpx;line-height: 18rpx;"><text>可预约</text></view>
						</view>
					</view>
				</view>
				<view class="cut"></view>
			</view>
			<view class='copyright'><text>本系统由<text style="font-family: 'Courier New', Courier, monospace;font-weight: 600;color: #05a8c8;"@click="toZhaoshang()">长沙轻时光</text>提供产品及技术支持</text></view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		formatDate
	} from '@/common/date';
	export default {
		components: {},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				storeId: 0,
				devices: [],
                                currentDevice: null,
				banners: [
					'/static/b1.jpg',
					'/static/b2.jpg'
				],
				swiperCurrent: 0,
				store: {},
				mobile: '',
				nums: [
					0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
				],
				images: [{
						picUrl: '/static/index/zhaoshang.jpg',
						url: '',
						type: 0
					}
				],
				functions: [
					// {
					// 	name: '开启大门',
					// 	icon: '/static/index/kaimen.png',
					// 	val: 0
					// },
					// {
					// 	name: '开包厢门',
					// 	icon: '/static/index/kaibaoxiang.png',
					// 	val: 0
					// },
					// {
					// 	name: '立即续费',
					// 	icon: '/static/index/xufei.jpg',
					// 	val: 0
					// },
					{
						name: '会员充值',
						icon: '/static/index/xufei.png',
						val: 0
					}
				]
			}
		},
		onLoad(options) {
			let that = this;
			let storeId = Api.STORE_ID
			that.storeId = storeId
			that.getBanners(Api.STORE_ID);
			that.loadData();
		},
		onShow() {
			let that = this;
			that.getBanners(Api.STORE_ID);
			that.loadData();
		},
		filters: {
			formatStatus(status) {
				if (status == 0) {
					return '可预订'
				}
				if (status == 1) {
					return '使用中'
				}
				if (status == 2) {
					return '未打扫'
				}
				if (status == 3) {
					return '维护中'
				}
				if (status == 4) {
					return '已禁用'
				}
			}
		},
		methods: {
			async getDevice(deviceId,machineName,desc,image,address,status) {
				let that = this;
				let data = await Api.apiCall('get', Api.device.getDeviceById, {
					id: deviceId
				});
				console.log("====" + data)
				if (data) {
					that.currentDevice = data.device;
					console.log("=====" + JSON.stringify(that.currentDevice));
					if(that.currentDevice.isBilliard == 0 && that.currentDevice.isDepositDevice == 0){
						uni.navigateTo({
							url: '/pages/meallist/selectBilliardMeal?deviceId=' + deviceId + '&storeId=' + this.storeId + "&servicePhone=" + this.store.servicePhone
						})
					}else{
						uni.navigateTo({
							url: '/pages/meallist/selectMeal?deviceId=' + deviceId + '&storeId=' + this
								.storeId + '&machineName=' + machineName + '&desc=' + desc + '&image=' +
								image + '&address=' + address + '&status=' + status + '&dasaoTime=' + this
								.store.dasaoTime
						})
					}
				}
			},
			toZhaoshang() {
				uni.navigateTo({
					url: '/pages/jiameng/jiameng'
				})
			},
			chongzhi() {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '请先授权登录.',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/public/login'
								});
							} else if (res.cancel) {

							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/money/recharge?storeId=' + Api.STORE_ID
					})
				}
			},
			toChuzhi() {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '请先授权登录.',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/public/login'
								});
								return;
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/money/recharge?storeId=' + Api.STORE_ID
					})
				}
			},
			async openDamen() {
				let data = await Api.apiCall('get', Api.qsg.openDamenForDandian, {
					storeId: Api.STORE_ID
				});
				if (data) {
					let that = this;
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '操作成功.',
						success: function(res) {
							if (res.confirm) {
								// that.$refs.popup.close('bottom');
							}
						}
					});
				}
			},
			call(mobile) {
				console.log(mobile)
				if (typeof(mobile) == 'undefined' || mobile == '') {

				} else {
					uni.makePhoneCall({
						phoneNumber: mobile,
						success: function() {
							console.log('拨打电话成功');
						},
						fail() {
							console.log('打电话失败了');
						}
					})
				}
			},
			async loadData() {
				let that = this;
				that.getDevices();
				that.getStoreById();
			},
			async getDevices() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let data = await Api.apiCall('get', Api.device.getDevices, {
					storeId: this.storeId
				});
				if (data) {
					uni.hideLoading();
					console.log(data)
					this.devices = data;
				}
			},
			async getStoreById() {
				console.log(11111111111)
				let data = await Api.apiCall('get', Api.store.getStoreById, {
					storeId: this.storeId
				})
				if (data) {
					this.store = data;
				}
			},
			fangda(url) {
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			goto(item) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return false;
				}
				// if (item.name == '美团核销') {
				// 	uni.navigateTo({
				// 		url: '/pages/meituan/hexiao'
				// 	})
				// }
				// if (item.name == '抖音核销') {
				// 	uni.navigateTo({
				// 		url: '/pages/douyin/hexiao'
				// 	})
				// }
				if (item.name == '会员充值') {
					uni.navigateTo({
						url: '/pages/money/recharge?storeId=' + Api.STORE_ID
					})
				}
				if (item.name == '开包厢门') {
					this.openBoxiangDoor();
				}
				if (item.name == '开启大门') {
					this.openDamen();
				}
				if (item.name == '立即续费') {
					uni.switchTab({
						url: '/pages/order/coachOrder'
					})
				}
			},
			async openBoxiangDoor() {
				let data = await Api.apiCall('get', Api.qsg.openBaoxiang, {});
				if (data) {
					let that = this;
					if (data == 1) {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '没有订单可开启包厢门.',
							success: function(res) {}
						});
					} else {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '操作成功.',
							success: function(res) {}
						});
					}

				}
			},
			async openDamen() {
				let data = await Api.apiCall('get', Api.qsg.openDamen, {});
				if (data) {
					let that = this;
					if (data == 1) {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '没有订单可开启大门.',
							success: function(res) {}
						});
					} else {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '操作成功.',
							success: function(res) {}
						});
					}
				}
			},
			douyinHexiao() {
				let url = '/pages/douyin/hexiao';
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url: url
				})
			},
			meituanHexiao() {
				let url = '/pages/meituan/hexiao';
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url: url
				})
			},
			async getBanners(storeId) {
				console.log(2313211321)
				let data = await Api.apiCall('get', Api.qsg.storeBanner, {
					storeId: storeId
				});
				if (data) {
					console.log(data)
					this.banners = data;
					this.swiperLength = this.banners
				}
			},
			async getDeviceMeal(deviceId, machineName, desc, image, address, status) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '请先授权登录.',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/public/login'
								});
							} else if (res.cancel) {

							}
						}
					});
				} else {
					if (status == 2) {
						let that = this;
						uni.showModal({
							title: '提示',
							content: '该房间暂未打扫，是否继续使用?',
							success: function(res) {
								if (res.confirm) {
									that.getDevice(deviceId,machineName,desc,image,address,status);
									// uni.navigateTo({
									// 	url: '/pages/meallist/selectMeal?deviceId=' + deviceId +
									// 		'&storeId=' + that.storeId + '&machineName=' +
									// 		machineName + '&desc=' + desc + '&image=' + image +
									// 		'&address=' + address + '&status=' + status + '&dasaoTime='+that.store.dasaoTime
									// })
								} else if (res.cancel) {

								}
							}
						});
					} else if (status == 3) {
						uni.showToast({
							icon: 'error',
							title: '该设备已离线'
						})
						return false;
					} else if (status == 4) {
						uni.showToast({
							icon: 'error',
							title: '该设备已禁用'
						})
						return false;
					} else {
						this.getDevice(deviceId,machineName,desc,image,address,status);
					}
				}
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			toAddress(address, name, longitude, latitude) {
				//此处item是 你获取到的当前点击的那一条数据  方法里面需要用到 名称  地址 经纬度
				uni.openLocation({
					latitude: Number(latitude), //目标纬度
					longitude: Number(longitude), //目标经度
					name: name, //名称
					address: address, //地址
					scale: 28
				});
			}
		}
	}
</script>

<style lang="scss">
	.main-color{
		background-color: #1296db;
	}
	
	.main-text-color{
		color: #1296db;
	}
	
	.copyright {
		font-size: 25rpx;
		color: #999999;
		text-align: center;
		bottom: 30rpx;
		left: 0;
		letter-spacing: 2rpx;
		right: 0;
	}

	.first {
		background-color: beige;
		height: calc(100% - 40px);
	}

	.checkMore {
		display: block;
		width: 150rpx;
		height: 60rpx;
		line-height: 58rpx;
		font-size: 24rpx;
		color: #1296db;
		border: 1px solid #1296db;
		text-align: center;
		box-sizing: border-box;
		/* margin-top: 46rpx; */
		margin-right: 30rpx;
		border-radius: 50rpx;
		float: right;
	}

	.typeImg {
		width: 140rpx;
		height: 170rpx;
		margin-right: 20rpx;
	}

	.costNum {
		font-size: 28rpx;
		color: #e61a0f;
		font-weight: bold;
	}

	.typeTitle {
		font-size: 25rpx;
		font-weight: 600;
		line-height: 50rpx;
		color: #1296db;
	}

	.typeTitle1 {
		font-size: 20rpx;
		font-weight: 400;
		line-height: 50rpx;
		color: #757575;
	}

	.typeImg image {
		width: 170rpx;
		height: 170rpx;
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 30upx;
		bottom: 94upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	.tagList {
		overflow: hidden;
		height: 40rpx;
	}

	.function {
		height: 150rpx;
		width: 100%;
		display: flex;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		
		view{
			width: 120rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			// align-items: center;
			text-align: center;
			margin-top: 10rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
	}

	.typeCost {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #1296db;
		color: #FFFFFF;
		text-align: center;
		font-weight: 600;
		letter-spacing: 3rpx;
		margin-top: 65rpx;
	}

	.typeDetail {
		width: 100%;
		height: 140rpx;
	}

	.typeList {
		display: flex;
	}

	.typeList:first-child {
		padding-top: 0;
	}

	.third {
		display: flex;
		height: 140rpx;
		padding-left: 18rpx;
		padding-top: 20rpx;
	}

	.rechargeAndHexiao {
		flex: 1;
		width: 100rpx;

		image {
			height: 120rpx;
			width: 350rpx;
		}
	}

	.priceSign {
		font-size: 24rpx;
	}

	.typeTag {
		display: inline-block;
		vertical-align: top;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 40rpx;
		line-height: 40rpx;
		background: #f5f5fa;
		font-size: 20rpx;
		color: #575759;
		margin-right: 14rpx;
		border: none;
	}

	.priceNum {
		font-size: 32rpx;
		font-weight: bold;
	}

	.priceIcon {
		font-size: 24rpx;
	}

	.cut {
		height: 10rpx;
		width: 100%;
		background-color: #ececec;
		margin-top: 20rpx;
	}

	.schoolName {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: bold;
		color: #000000;
	}

	.uni-input {
		padding: 0 24rpx;
	}

	.choese {
		width: 750rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		color: #888888;
	}

	.dataName {
		height: 60rpx;
	}

	.currentSchool {
		height: 60rpx;
		background: #FFFFFF;
	}

	.video-tit {
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
		display: inline-block;
		vertical-align: top;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.checkMore text {
		display: block;
		width: 100%;
		height: 60rpx;
		line-height: 58rpx;
		font-size: 24rpx;
		color: #1296db;
		border: 1px solid #1296db;
		text-align: center;
		box-sizing: border-box;
		margin-top: 46rpx;
		border-radius: 50rpx;
	}

	.checkMore {
		font-size: 24rpx;
		color: #1296db;
		flex: 1;
	}

	.video-price {
		font-size: 30rpx;
		color: #ecb20d;
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		box-sizing: border-box;
	}

	.video-reader {
		font-size: 24rpx;
		color: #666;
	}

	.video-describe {
		flex: 3;
		display: inline-block;
		vertical-align: top;
	}

	.video-cover {
		width: 100rpx;
		height: 100rpx;
		margin: 30rpx 30rpx 30rpx 0;
		display: inline-block;
		vertical-align: top;
		border-radius: 50%;
		flex: 1;
	}

	.video-cover image {
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}

	.video-content {
		width: 690rpx;
		padding: 22rpx 0;
		border-bottom: 1rpx solid #e6e6e6;
		box-sizing: border-box;
		display: flex;
	}

	.video-content:last-child {
		border: none;
	}

	.video-list {
		width: 750rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	
	.joinus {
		height: 190rpx;
		background-color: #F7F7F7;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.carousel {
		width: 100%;
		height: 190rpx;
	
		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}
	
		image {
			width: 100%;
			height: 100%;
			// border-radius: 10upx;
		}
	}
</style>
